<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>
<body>
    <!-- 
        标准盒子：width=内容宽+左右padding+左右边框+左右margin
        标准盒子：height=内容高+上下padding+上下边框+上下margin
        IE（怪异）盒子：width=css的宽+左右margin
        IE（怪异）盒子：height=css的高+上下margin


        width:盒子内容的宽
        height：盒子里内容的高
        padding：内边距
        border:边框
        margin：外边框 
           一个值 上下左右都有
           两个值：第一个是上下  第二个值是左右
           三个值：第一个是上  第二个值是左右  第三个值是下
           四个值：分别是上右下左  顺时针方向
        outline： 边框外轮廓
     -->

     <!-- 
    精灵图：可以减少服务器压力

    :nth-child(1) 孩子 
 -->
</body>
</html>